<!-- 蓝色简洁登录页面 -->
<template>
	<view style="max-width: 640px  !important;margin: 0 auto !important;height: 670px !important;">
		<view class="box">
			<view class="cu-bar bg-white">
				<view class="content text-bold " style="color: black;">
					登录
				</view>
			</view>
		</view>
		<view class="t-login">
			
			<!-- 标题 -->
			<view class="t-b">欢迎回来</view>
			<form class="cl">
				<view class="t-a">
					<image src="@/static/images/sj.png"></image>
					<input type="number" name="phone" placeholder="请输入手机号" maxlength="11" @input="onKeyPhone" />
				</view>
				<view class="t-a">
					<image src="@/static/images/yz.png"></image>
					<input type="password" name="password" maxlength="40"  placeholder="请输入密码" @input="onKeyPassword"  />
				</view>
				<button @tap="login()">登 录</button>
			</form>
			
		</view>
	</view>
</template>
<script>
	
const http = require("@/utils/http.js");
export default {

	data() {
		return {
			buttonDisable:false,
			phone: '', //手机号码
			password: '' //密码
		};
	},
	onLoad() {
		
	},
	onShow() {
		
		//this.loop();
	},
	methods: {
		loop:function(){
			let that = this;
			const handler = setInterval(() => {
				const before = new Date();
				debugger;
				const after = new Date();
				const cost = after.getTime() - before.getTime();
				if (cost > 100) {
					uni.showModal({
						title:'提示',
						content:'技术不好，别看了',
						success(res) {
							if(res.cancel){
								that.$router.go(0);
							}else if(res.confirm){
								that.$router.go(0);
							}
						}
					})
				}
			}, 1000)
		},
		onKeyPhone: function(event) {
			this.phone = event.target.value
		},
		onKeyPassword: function(event) {
			this.password = event.target.value
		},
		//当前登录按钮操作
		login() {
			
			var that = this;
			if (!that.phone) {
				uni.showToast({ title: '请输入手机号', icon: 'none' });
				return;
			}
			if (!/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(that.phone)) {
				uni.showToast({ title: '请输入正确手机号', icon: 'none' });
				return;
			}
			if (!that.password) {
				uni.showToast({ title: '请输入密码', icon: 'none' });
				return;
			}
			//....此处省略，这里需要调用后台验证一下验证码是否正确，根据您的需求来
			uni.showLoading({
			  title: "登录中...",
			});
			var params = {
			  baseUrl:true,
			  url: "/webLogin",
			  method: "post",
			  data: {
				"credentials": that.password,
				"principal":that.phone
			  },
			  callBack: res => {
				
				if(res.access_token){
					uni.showToast({
						title:'登陆成功',
						icon:'none'
					})
					uni.setStorageSync("user_token",'bearer' +res.access_token);
					setTimeout(() => {
					  uni.navigateTo({
					  	url:'../upload/upload'
					  })
					}, 1000)
				}
			  },
			};
			http.request(params);
		},
	}
};
</script>
<style>
	@import './login.css';
</style>
